<template>
  <div class="profile-container">
    <a-card title="管理员信息" class="profile-card">
      <div class="profile-content" v-if="userInfo">
        <a-descriptions :column="1" bordered>
          <a-descriptions-item label="ID">
            {{ userInfo.id }}
          </a-descriptions-item>
          <a-descriptions-item label="邮箱">
            {{ userInfo.email }}
          </a-descriptions-item>
          <a-descriptions-item label="姓名">
            {{ userInfo.name || '未设置' }}
          </a-descriptions-item>
          <a-descriptions-item label="状态">
            <a-tag :color="userInfo.status ? 'green' : 'red'">
              {{ userInfo.status ? '启用' : '禁用' }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="创建时间">
            {{ formatDate(userInfo.created_at) }}
          </a-descriptions-item>
          <a-descriptions-item label="更新时间">
            {{ formatDate(userInfo.updated_at) }}
          </a-descriptions-item>
        </a-descriptions>
        
        <div class="profile-actions">
          <a-button type="primary" @click="refreshUserInfo" :loading="loading">
            <ReloadOutlined />
            刷新信息
          </a-button>
        </div>
      </div>
      
      <div v-else-if="loading" class="loading-container">
        <a-spin size="large" />
        <p>正在加载管理员信息...</p>
      </div>
      
      <div v-else class="error-container">
        <a-result
          status="error"
          title="获取管理员信息失败"
          sub-title="请检查网络连接或联系系统管理员"
        >
          <template #extra>
            <a-button type="primary" @click="refreshUserInfo">
              重新加载
            </a-button>
          </template>
        </a-result>
      </div>
    </a-card>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useAuthStore } from '../stores/auth'
import { message } from 'ant-design-vue'
import { ReloadOutlined } from '@ant-design/icons-vue'

export default {
  name: 'ManagersView',
  components: {
    ReloadOutlined
  },
  setup() {
    const authStore = useAuthStore()
    const loading = ref(false)
    const userInfo = ref(null)

    // 格式化日期
    const formatDate = (dateString) => {
      if (!dateString) return '未知'
      const date = new Date(dateString)
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      })
    }

    // 获取用户信息
    const refreshUserInfo = async () => {
      loading.value = true
      try {
        const result = await authStore.getUserInfo()
        if (result.success) {
          userInfo.value = result.data
          message.success('管理员信息获取成功')
        } else {
          message.error(result.message || '获取管理员信息失败')
        }
      } catch (error) {
        console.error('获取管理员信息失败:', error)
        message.error('获取管理员信息失败，请检查网络连接')
      } finally {
        loading.value = false
      }
    }

    // 组件挂载时获取用户信息
    onMounted(() => {
      // 如果store中已有用户信息，直接使用
      if (authStore.user) {
        userInfo.value = authStore.user
      } else {
        // 否则重新获取
        refreshUserInfo()
      }
    })

    return {
      loading,
      userInfo,
      formatDate,
      refreshUserInfo
    }
  }
}
</script>

<style scoped>
.profile-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.profile-card {
  border-radius: 0;
  box-shadow: none;
}

.profile-content {
  padding: 20px 0;
}

.profile-actions {
  margin-top: 20px;
  text-align: center;
}

.loading-container {
  text-align: center;
  padding: 60px 0;
}

.loading-container p {
  margin-top: 16px;
  color: #666;
  font-size: 14px;
}

.error-container {
  padding: 20px 0;
}

:deep(.ant-descriptions-item-label) {
  font-weight: 600;
  background-color: #f5f5f5;
  color: #000;
}

:deep(.ant-descriptions-item-content) {
  background-color: #fff;
  color: #000;
}
</style>